<template>
	<section class="page_box">
		<el-card class="box_card">
	        <el-tag type="success"><el-checkbox :disabled="disabled" :value="checkAll"  @change="handleAllChange">全选</el-checkbox></el-tag>
	        <el-button type="danger" size="small" :disabled="disabled" @click="delRow">删除行</el-button>
	        <el-button type="success" size="small" :disabled="disabled" @click="sortRow('ascend')">排序</el-button>
	        <el-input  class="card_input" size="small" :disabled="disabled" v-model="decimalVal" @input='getInputNum'  placeholder="小数点"></el-input>
	        <el-button type="warning" size="small" :disabled="disabled" @click="decimalRow">保留小数</el-button>
	        <el-input  class="card_input02" size="small" @click.native="!disabled?selectFields(processType[2], '拆份'):null" :readonly="true" :disabled="disabled" v-model="solitName"  placeholder="输入拆分名称"></el-input>
	        <el-button type="primary" size="small" :disabled="disabled" @click="splitRow">拆分</el-button>
	        <el-input  class="card_input02" size="small" @click.native="!disabled?selectFields(processType[4], '替换'):null" :readonly="true" :disabled="disabled" v-model="replaceName"  placeholder="替换目标"></el-input>
	        <el-button type="success" size="small" :disabled="disabled" @click="replaceRow">替换</el-button>
	    </el-card>

	    <!-- 选择字段对话框 -->
        <el-dialog  :title="dialogTitle"  :visible.sync="dialogVisible"  width="50%"  :before-close="handleClose">
            <el-checkbox-group v-model="RowFields">
                <div class="dialog_list">
                    <div class="dialog_item" v-for="(item, i) in RowFieldsArray" :key="i">
                        <el-checkbox :label="item"></el-checkbox>
                    </div>
                </div>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="handleClose">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
            </div>
        </el-dialog>
	</section>
</template>

<script>
	export default{
		name: 'Operation',
		title: '表格操作',
		props: {
			hasDisabled: [Boolean],					// 禁止
			rowsArray: [Array, Object],				// 是否全选
			originalTableData: [Array],				// 原来的表格数据
			tableHead: [Array, Object],				// 表头数据
			tableData: [Array, Object],				// 表格数据
			tableAllData: [Array, Object],				// 表格全部数据
			getDelData: [Function],					// 删除数据
			getSortData: [Function],				// 排序数据
			getDecimal: [Function],					// 小数点数据
			getSplitData: [Function],				// 拆份数据
			getReplaceData: [Function],				// 替换数据
			addProcess: [Function],					// 添加步骤
		},
		computed: {
			// 是否全选
	        checkAll() {
	            return this.rowsArray.length === Object.keys(this.tableHead).length || false
	        },
	        // 如果导入一张表格可以进行操作
	        disabled() {
	        	if (this.tableAllData.length !== 1) {
	        		return true
	        	}
	        	return this.hasDisabled
	        }
		},
		methods: {
			// 选择字段
	        selectFields(type, title) {
	            if(this.$Util.hasHintDialog.call(this, '请选择列', this.rowsArray.length != 1)){
	                this.FieldsType = type
	                this.dialogVisible = true
	                this.dialogTitle = title
	                this.RowFieldsArray = this.getRowFields(this.tableData)
	            }
	        },
	        // 获取列的字段
	        getRowFields(data) {
	            let array = []
	            data.forEach((val) => {
	                this.rowsArray.forEach((key) => {
	                    if(val.hasOwnProperty(key)) {
	                        if(!array.includes(val[key])){
	                            array.push(val[key])
	                        }
	                    }
	                }) 
	            })
	            return array
	        },
			// 关闭对话框
	        handleClose() {
	            this.dialogVisible = false
	        },
	        // 确定对话框
	        handleConfirm() {
	            if(this.FieldsType == 'solit'){         // 拆分
	                this.solitName = this.RowFields.join(",")
	            }
	            else if(this.FieldsType == 'replace') {
	                this.replaceName = this.RowFields.join(",")
	            }
	            this.RowFields = []
	            this.handleClose()
	        },
			// 全选
	        handleAllChange(value) {
	            let rowsArray = value? Object.keys(this.tableHead) : []
	            // 向父组件传值
	            this.$emit('parentData',{
	            	rowsArray,
	            	sortName: null,					// 取消排序按钮
	            })
	            rowsArray = null
	        },
	        // 删除保留的字段
	        delRetain(rows) {
	            let rowsArray = Object.keys(this.tableHead)
	            rows.forEach((val) => {
	                rowsArray.splice(rowsArray.indexOf(val), 1)
	            })
	            // 向父组件传值
	            this.$emit('parentData',{
	            	rowsArray
	            })
	            return rowsArray
	        },
	        // 启动删除的列
	        delRow() {
	            // 判断
	            if(this.$Util.hasHintDialog.call(this, '请选择你所要删除的列', !this.rowsArray.length)) {  
	                let rowsArray = this.delRetain(this.rowsArray)  
	                let tableData = this.getDelData(this.$Util.deepCopy(this.tableData))
	                // 添加步骤
	                this.addProcess(this.processType[0], '删除', rowsArray)  

	                this.$nextTick(() => {
	                	// 保存步骤数据
		                let originalTableData = this.originalTableData
	                 		originalTableData.push(tableData) 
		                // 向父组件传值
			            this.$emit('parentData',{
			            	rowsArray: [],
			            	originalTableData,
			            	tableData,
			            })
	                })
	            }
	        },
	        // 启动排序的列
	        sortRow(type) {
	            if(this.$Util.hasHintDialog.call(this, '请选择你所要一个排序的列', this.rowsArray.length !== 1)){  
	                let sortName = this.rowsArray[0]
	                let sortType = type || "ascend"
	                let tableData = this.getSortData(this.$Util.deepCopy(this.tableData), sortType)
	                // 添加步骤
	                this.addProcess(this.processType[1], '排序', this.rowsArray, sortType)  

	                // 保存步骤数据
	                this.$nextTick(() => {
		                let originalTableData = this.originalTableData
	                 		originalTableData.push(tableData) 
		                // 向父组件传值
			            this.$emit('parentData',{
			            	originalTableData,
			            	tableData,
			            	sortName,
			            	sortType,
			            })
	                })
	            }
	        },
	        // 小数点校验
	        getInputNum(value) {  
	            let reg = /^[0-9]$/      
	            if(!reg.test(value)){
	                this.$message.error('只能输入一个数指定数字');
	                return
	            }
	        },
	        // 启动小数点
	        decimalRow() {
	            if(this.$Util.hasHintDialog.call(this, '请输入你所要保留几位小数点', !this.decimalVal )) {
	                if(this.$Util.hasHintDialog.call(this, '请选择你所要保留小数点的列', !this.rowsArray.length )) {
	                    let tableData = this.getDecimal(this.$Util.deepCopy(this.tableData), this.decimalVal)

	                    // 添加步骤
	                    this.addProcess(this.processType[3], '保留小数点', this.rowsArray, this.decimalVal)

	                    // 保存步骤数据
	                    this.$nextTick(() => {
		                	let originalTableData = this.originalTableData
	                 			originalTableData.push(tableData)

		                    // 向父组件传值
				            this.$emit('parentData',{
				            	originalTableData,
				            	tableData,
				            	rowsArray: [],
				            })
	                    })
	                }
	            }
	        },
	        // 启动拆分的行
	        splitRow() {
	            if(this.$Util.hasHintDialog.call(this, '请选择你所要拆分的列', this.rowsArray.length !== 1)){
                    let tableData = this.getSplitData(this.$Util.deepCopy(this.tableData), this.solitName)

                    // 添加步骤
                    this.addProcess(this.processType[2], '拆分', this.rowsArray, this.solitName) 

                    // 保存步骤数据
                    this.$nextTick(() => {
		                let originalTableData = this.originalTableData
	                 		originalTableData.push(tableData) 

	                    // 向父组件传值
			            this.$emit('parentData',{
			            	originalTableData,
			            	tableData,
			            	rowsArray: [],
			            })  
                    })	                    
                } 
	        },
	        // 替换表头
	        replaceRow() {
	            if(this.$Util.hasHintDialog.call(this, '请选择你所要替换的名称', !this.replaceName)){
	                if(this.$Util.hasHintDialog.call(this, '请选择所要替换的列', !this.rowsArray.length)){
	                    if(this.$Util.hasHintDialog.call(this, '选择的替换的列要和你输入的名称数目一样', this.rowsArray.length !== this.replaceName.trim().split(',').length)){

	                        this.getReplaceData(this.replaceName)

	                        // 添加步骤
	                        this.addProcess(this.processType[4], '替换', this.rowsArray, this.replaceName)

	                        // 保存步骤数据
	                        this.$nextTick(() => {
				                let originalTableData = this.originalTableData
			                 		originalTableData.push(this.tableData) 

	                 			// 向父组件传值
					            this.$emit('parentData',{
					            	originalTableData,
					            	rowsArray: [],
					            })  
	                        })
	                    }
	                }
	            }
	        },
		},
		data() {
			return {
				decimalVal: 2,					// 小数点几位数
				solitName: '',					// 拆分名称
				replaceName: '',				// 替换名称
				// 步骤类型 del==删除0，sort==排序1，solit==拆分2，decimal==小数点3, replace==替换4
           		processType: ['del', 'sort', 'solit', 'decimal', 'replace'], 
           		dialogVisible: false,           // 显示隐藏对话框  
            	dialogTitle: '',                // 显示标题
            	FieldsType: '',					// 选择类型
            	RowFields: [],                  // 表格列选择的字段
           		RowFieldsArray: [],             // 表格列全部的字段
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_box{
		width: 100%;
		height: 100%;
		.box_card{
	        width: 100%;
	        .card_input{
		        width:50px;
		        display: inline-block;
		    }
		    .card_input02{
		        width: 120px;
		    }
	    }
	    .dialog_list{
	        width: 100%;
	        display: flex;
	        align-items: center;
	        flex-wrap: wrap;
	        .dialog_item{
		        margin-right: 30px;
		        margin-bottom: 10px
		        label{
			        display: flex;
			        align-items: center;
			    }
		    }
	    }
	}
</style>